<template>
	<view class="flex grid-gap-4" @tap="$page.open('/pages/technician/details?id=' + find.technician_id)">
		<view class="avatar">
			<image :src="find.headimg" lazy-load mode="" class="img"></image>
			<image :src="find.headimg_decoration" v-if="find.headimg_decoration" class="title-img"></image>
		</view>
		<view class="flex-1 flex flex-column grid-gap-2">
			<view class="flex grid-gap-2 flex-y-flex-start">
				<text class="h8 font-weight-500 text-ellipsis-2 text-break-all">{{ find.nickname }}</text>
				<x-tag :type="find.gender" bg v-if="find.age_tag && WEBCONFIG?.show_age">
					<text class="h10 font-weight-500 text-nowrap">{{ find.age_tag }}</text>
				</x-tag>
				<view class="flex-1">
				</view>
				<text class="h10 text-placeholder" v-if="find.distance_text"> {{ find.distance_text }} </text>
			</view>
			<view class="flex grid-gap-2">
				<x-tag :type="find.work_shop_id ? 'danger' : 'warning'" bg light @tap.stop="openShop()">
					<uni-icons type="shop" color="var(--xl-danger-light-3)" v-if="find.work_shop_id"></uni-icons>
					<uni-icons type="person" color="var(--xl-warning-light-3)" v-else></uni-icons>
					{{ find.shop_title }}
				</x-tag>
				<x-tag type="primary" bg v-if="find.appointment">最早可约：{{ find.appointment_time }}</x-tag>
				<x-tag type="dark" light text v-else>休息中</x-tag>
			</view>
			<view class="flex grid-gap-4">
				<view class="flex flex-center grid-gap-2"
					@tap.stop="$page.open('/pages/technician/details?nav=comment&id=' + find.technician_id)">
					<image src="@/static/icons/comment_grade.png" mode="scaleToFill"
						style="width: 16px;height: 16px;" />
					<text class="text-FE5D00">{{ find.comment_grade }}</text>
				</view>
				<view class="flex flex-center grid-gap-2">
					<text class="text-grey h9">接单数{{ find.order_num }}</text>
				</view>
			</view>
			<view class="flex grid-gap-4 flex-center">
				<view class="flex flex-center grid-gap-2"
					@tap.stop="$page.open('/pages/technician/details?nav=comment&id=' + find.technician_id)">
					<image src="@/static/icons/comment_num.png" mode="scaleToFill" style="width: 16px;height: 16px;" />
					<text class="text-FE5D00">{{ find.comment_num }}</text>
				</view>
				<view class="flex-1"></view>
				<slot name="action">
					<button class="btn-primary-light-1 btn-round" size="mini" v-if="find.appointment"
						@tap.stop="goReserva">去预约</button>
					<button class="btn-dark-light-3 btn-round" size="mini" disabled v-else>休息中</button>
				</slot>
			</view>
			<text v-if="props.item.last_time" class="h10 text-primary">{{
				$func.formatFriendlyTime(props.item.last_time) }}有人预约</text>
		</view>
	</view>
</template>
<script setup lang="ts">
import { $page, $func, $message } from "@/utils";
import { ref, defineProps } from "vue";
import { useRefs, useUserStore, useWebConfigStore } from "../../stores";
import { useStorage } from "../../utils/storage";
const UserStore = useUserStore();
const { USERINFO } = useRefs(UserStore);
const WebConfigStore = useWebConfigStore();
const { WEBCONFIG } = useRefs(WebConfigStore);
const props = withDefaults(defineProps<{
	item: any,
	service?: any
}>(), {
	item: {}
});
const find = ref(props.item);
const openShop = () => {
	if (find.value.work_shop_id) {
		$page.open('/pages/mch/details?id=' + find.value.work_shop_id);
	}
};
const goReserva = () => {
	if (props.service && UserStore.hasLogin()) {
		let ReservaData = {
			technician: find.value,
			service: [{
				...props.service,
				num: 1
			}]
		};
		useStorage().set('ReservaData', ReservaData).then(() => {
			if (WEBCONFIG.value?.force_realname && USERINFO.value?.is_realname !== 1) {
				uni.showModal({
					title: '提示',
					content: '请先完成实名认证',
					confirmText: '去认证',
					success: (res) => {
						if (res.confirm) {
							$page.open('/pages/user/account/realname')
						}
					}
				})
				return;
			}
			$page.open('/pages/order/confirm', true);
		}).catch(() => {
			$message.error('页面通信错误，请重试');
		})
	} else {
		return $page.open('/pages/technician/details?id=' + find.value.technician_id);
	}
}
</script>
<style lang="scss" scoped>
.avatar {
	position: relative;
	width: 154rpx;
	height: 154rpx;
	display: flex;
	align-items: center;

	.img {
		width: 154rpx;
		height: 154rpx;
		border-radius: 50%;
	}

	.title-img {
		width: 194rpx;
		height: 194rpx;
		position: absolute;
		left: -20rpx;
		top: -20rpx;
	}
}

.text-FE5D00 {
	color: #FE5D00;
}
</style>